<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Narrow</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="js/common.js"></script>
    <script src="js/index.js"></script>
    <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <![endif]-->
</head>
<body>
    <div class="container">
        <!--头部-->
        <header>
            <div class="center">
                <div class="logo base-color fl">
                    <h1>NARROW</h1>
                </div>
                <nav>
                    <ul class="fr">
                        <li class="active"><a href="#">HOME</a></li>
                        <li><a href="log/log.html">SERVICE</a></li>
                        <li><a href="#">PRODUCTS</a></li>
                        <li><a href="#">ABOUT</a></li>
                        <li><a href="#">CONTACT</a></li>
                    </ul>
                </nav>
            </div>
        </header>
        <!--轮播图-->
        <div class="carousel">
            <ul class="carousel-img-list">
                <li><a href="javascript:void(0);"><img src="images/img_large_1.jpg" alt=""></a></li>
                <li><a href="javascript:void(0);"><img src="images/img_large_2.jpg" alt=""></a></li>
                <li><a href="javascript:void(0);"><img src="images/img_large_3.jpg" alt=""></a></li>
                <li><a href="javascript:void(0);"><img src="images/img_large_4.jpg" alt=""></a></li>
                <li><a href="javascript:void(0);"><img src="images/img_large_5.jpg" alt=""></a></li>
            </ul>
            <ul class="carousel-marks">
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <span class="carousel-left-arrow">&lt;</span>
            <span class="carousel-right-arrow">&gt;</span>
        </div>
        <!--欢迎语1-->
        <section class="welcome center">
            <h3 class="base-color">WELCOME TO ARROW</h3>
            <p>
                Far far away,behind the word mountains,far frome the countries Vokalia, there live
            </p>
            <p>
                the blind texts.Separated they live in Bookmarksgrove right at the coast of the
            </p>
            <p>
                Semantics, a large language ocean.
            </p>
        </section>
        <!--预览图片-->
        <section class="summary center">
            <div class="summary-left fl">
                <span class="mask">Far far away,behind the world mountains,far from the countries Vokalia and Consonantia.</span>
            </div>
            <div class="summary-right fl">
                <ul>
                    <li>
                        <div></div>
                        <p>Far far away,behind the world mountains,far from the</p>
                        <p>Web Design</p>
                    </li>
                    <li>
                        <div></div>
                        <p>Far far away,behind the world mountains,far from the</p>
                        <p>User Experience</p>
                    </li>
                    <li>
                        <div></div>
                        <p>Far far away,behind the world mountains,far from the</p>
                        <p>Web Development</p>
                    </li>
                </ul>
            </div>
        </section>
        <!--介绍标题-->
        <section class="intro">
            <h2>FIRST PRIORITY</h2>
        </section>
        <!--产品-->
        <section class="products center">
            <h3 class="base-color">WELCOME TO ARROW</h3>
            <p>
                Far far away,behind the word mountains,far frome the countries Vokalia, there live
            </p>
            <p>
                the blind texts.Separated they live in Bookmarksgrove right at the coast of the
            </p>
            <p>
                Semantics, a large language ocean.
            </p>
        </section>
        <!--图片滚动栏-->
        <section class="photo center clearfix">
            <div class="photo-box">
                <ul class="photo-list clearfix">
                    <li><img src="images/product-1.jpg" alt=""></li>
                    <li><img src="images/product-2.jpg" alt=""></li>
                    <li><img src="images/product-3.jpg" alt=""></li>
                    <li><img src="images/product-4.jpg" alt=""></li>
                </ul>
                <span class="photo-left-arrow">&lt;</span>
                <span class="photo-right-arrow">&gt;</span>
            </div>
        </section>
        <!--底部-->
        <footer>
            <div class="footer-intro">
                <div class="center">
                    <div class="foot-part">
                        <span class="icon-font">&#xe756;</span>
                        <div class="foot-part-text">
                            <h6>ABOUT US</h6>
                            <p>Far far away,behind the world mountains,far from the countries Vokalia and Consonantia,there live the blind texts.</p>
                        </div>
                    </div>
                    <div class="foot-part">
                        <span class="icon-font">&#xe74c;</span>
                        <div class="foot-part-text">
                            <h6>WHAT WE DO</h6>
                            <p>Far far away,behind the world mountains,far from the countries Vokalia and Consonantia,there live the blind texts.</p>
                        </div>
                    </div>
                    <div class="foot-part">
                        <span class="icon-font">&#xe6eb;</span>
                        <div class="foot-part-text">
                            <h6>WHY CHOOSE US</h6>
                            <p>Far far away,behind the world mountains,far from the countries Vokalia and Consonantia,there live the blind texts.</p>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
    </div>
</body>
</html>